<template>
  <div>
    <!-- 无id时, 可以使用index(反正也是就地更新) -->
    <div  v-for="(item,index) in  arr" :key="index"
      style="display: inline-block"
    >
      <input v-model="item.c"  type="checkbox" />
      <span>{{ item.num}}</span>
    </div>
    <p>你选中的元素, 累加的值和为: {{total}}</p>
  </div>
</template>

<script>
export default {
  data(){
    return{
   arr: [
    {num:9,
   c:false
   }
   ,{num:15,
   c:false
   }, {num:19,
   c:false
   }, {num:25,
   c:false
   }, {num:29,
   c:false
   }, {num:31,
   c:false
   }, {num:48,
   c:false
   }, {num:57,
   c:false
   }, {num:62,
   c:false
   }, {num:79,
   c:false
   }, {num:87,
   c:false
   }],

   
    }
  },
  // methods:{
  //   total(){

  //    return  this.arr.reduce((sum,item)=>sum +=item.num,0)
  //   }
  // },

 computed:{
      checkall:{
      get(){
        return this.arr.some(item=>item.c)
      },
      set(val){
        return this.arr.forEach(item=>item.c=val)
      }
    },
    total(val){
     
      
      const index= this.arr.findIndex(item=>item.c==val)

      return this.arr[index].num
      }
    
      
       
      

    }
    
  }

</script>